<!DOCTYPE html> 
<html> 
	<head>
    		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1"> 
		<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
		<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
		<script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
		<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBPentoI96s6s140JhpPqs1PPZKGQ1GF-4&sensor=false&libraries=weather&language=hr"></script>
		<script type="text/javascript" charset="utf-8" src="cordova-2.0.0.js"></script>
		
		<script>
		
			function showAlert() {
        		navigator.notification.alert(
            			'Mjesto nije pronađeno! Pokušajte ponovo!',  
             			alertDismissed,         
            			'Upozorenje',           
            			'U redu'                 
        		);
    		}
    
    		function alertDismissed() {
    			initialize();
    		}
    		
			var geocoder;

      		function initialize() {
    			geocoder = new google.maps.Geocoder();
        		var mapOptions = {
          			center: new google.maps.LatLng(43.85, 18.25),
          			zoom: 8,
          			mapTypeId: google.maps.MapTypeId.ROADMAP
        		};
        		var map = new google.maps.Map(document.getElementById("map_canvas"),mapOptions);
      		
      		}

			function showWeather() {
				var address = prompt("Unesite ime mjesta");
				
				// check if user pressed cancel button
				if (address === null) {
        				return;
    				}

    				geocoder.geocode( { 'address': address}, function(results, status) {
      				if (status == google.maps.GeocoderStatus.OK) {
					var map = new google.maps.Map(document.getElementById('map_canvas'), {
       					zoom:8,
       					mapTypeId: google.maps.MapTypeId.ROADMAP
     				});
					map.setCenter(results[0].geometry.location);
      				var weatherLayer = new google.maps.weather.WeatherLayer({
        			temperatureUnits: google.maps.weather.TemperatureUnit.CELSIUS
        			});
	
        			weatherLayer.setMap(map);
        			var cloudLayer = new google.maps.weather.CloudLayer();
        			cloudLayer.setMap(map);
      				} 
			
				if (status == google.maps.GeocoderStatus.ZERO_RESULTS) {	
					showAlert();	
				}
   				});

			}

			function showRoute() {
				var startPoint = prompt("Polazište:");
				var endPoint = prompt("Destinacija");
				// check if user pressed cancel button or input is empty
				if (startPoint === null || endPoint === null) {
        				return; 
    				}

     				var directionsService = new google.maps.DirectionsService();
     				var directionsDisplay = new google.maps.DirectionsRenderer();
     				var map = new google.maps.Map(document.getElementById('map_canvas'), {
       					zoom:7,
       					mapTypeId: google.maps.MapTypeId.ROADMAP

     				});

     				directionsDisplay.setMap(map);
     				directionsDisplay.setPanel(document.getElementById('panel'));

     				var request = {
       					origin: startPoint, 
       					destination: endPoint,
       					travelMode: google.maps.DirectionsTravelMode.DRIVING
     				};

     				directionsService.route(request, function(response, status) {
       				if (status == google.maps.DirectionsStatus.OK) {
         				directionsDisplay.setDirections(response);
       				} else {
			
				if (status == google.maps.DirectionsStatus.NOT_FOUND) {
					showAlert();
				} 

				}
				
				});

			}
		</script>
 
		<style>
			html { height: 100% }
			body { height: 100%; margin: 0; padding: 0 }
			#map_result{width:100%; height:100%;}
			#map_canvas{width:100%; height:90%;padding:0;}
		</style>
	</head>

	<body>
		<div data-role="page" id="map_result">
    		<div data-role="header">
			<div data-role="navbar">
				<ul>
					<li><a onclick='showRoute()'>Ruta</a></li>
					<li><a onclick='showWeather()'>Vrijeme</a></li>
				</ul>
			</div>

		</div>


		<body onload="initialize()">
		<div id="map_canvas"></div>
		<div id="panel"</div>
		
	</body>
</html>

